<template>
  <view class="content">
    <view class="information-title">
      <image src="@/static/img/pay/line.png" alt=""></image>
      <text>评价{{ commentList.length ? commentList.length : 0 }}</text>
    </view>
    <scroll-view scroll-y="true" style="height: 1000rpx">
      <view
        class="comments-row"
        v-for="(item, index) in commentList"
        :key="index"
      >
        <view class="comments-peo">
          <image :src="item.createByFace" alt="" class="header-img"></image>
          <view class="name-date">
            <text class="name">{{ item.createByName }}</text>
            <text class="date">{{ item.createTime }}</text>
          </view>
          <!-- <view class="evaluation">
            <text>5.0</text>
            <u-rate
              :current="3.7"
              :disabled="true"
              active-color="#faad39"
            ></u-rate>
          </view> -->
        </view>
        <view class="comments-text">
          <text>{{ item.details }}</text>
        </view>
        <view class="comments-msg">
          <view class="msg">
            <image
              src="@/static/img/courseBuy/comments.png"
              alt=""
              @tap="commentsApply(item)"
            ></image>
            <text>{{ item.replyNum }}</text>
          </view>
          <view class="praise">
            <image
              src="@/static/img/courseBuy/praise2.png"
              alt=""
              @click="getLike(item.id)"
            ></image>
            <text>{{ item.likes }}</text>
          </view>
        </view>
      </view>
      <!-- 加载更多 -->
      <view @click="addRandomData" class="view-more">
        {{ isAdd ? "查看更多" : "没有更多了" }}
      </view>
    </scroll-view>
    <!-- 回复评论footer -->
    <view class="apply-footer" v-if="applyShow">
      <view class="course-comments">
        <view class="comments-input">
          <input type="text" v-model="textval" />
        </view>
        <view class="search-information">
          <!-- <view class="">
						<img src="@/static/img/courseBuy/comments.png" alt="">
						<text>3</text>
					</view>
					<view class="">
						<img src="@/static/img/courseBuy/praise2.png" alt="">
						<text>24</text>
					</view> -->
          <view class="" style="color: #f73935" @click="submitComment">
            发表评价
          </view>
        </view>
      </view>
    </view>
    <!-- 评论 -->
    <view class="comments-modal">
      <u-popup v-model="isShowCommentsModal" mode="bottom" @close="modalClose">
        <view class="comments-grade">
          <view class="comments-img">
            <image
              :src="
                commentsImg.current >= 1
                  ? commentsImg.selected
                  : commentsImg.slecet
              "
              alt=""
              @tap="choose(1)"
            ></image>
            <image
              :src="
                commentsImg.current >= 2
                  ? commentsImg.selected
                  : commentsImg.slecet
              "
              alt=""
              @tap="choose(2)"
            ></image>
            <image
              :src="
                commentsImg.current >= 3
                  ? commentsImg.selected
                  : commentsImg.slecet
              "
              alt=""
              @tap="choose(3)"
            ></image>
            <image
              :src="
                commentsImg.current >= 4
                  ? commentsImg.selected
                  : commentsImg.slecet
              "
              alt=""
              @tap="choose(4)"
            ></image>
            <image
              :src="
                commentsImg.current == 5
                  ? commentsImg.selected
                  : commentsImg.slecet
              "
              alt=""
              @tap="choose(5)"
            ></image>
          </view>
          <text>{{ choose() }}星好评，课程非常棒！</text>
        </view>
        <view class="commets-input">
          <u-input
            v-model="commentsVal"
            :auto-height="true"
            maxlength="390"
            :clearable="false"
            type="textarea"
            placeholder="快来说说学习感受..."
          />
          <view v-if="commentsImg.src.length" class="add-img-row">
            <view
              class="add-img-detail"
              v-for="(item, index) in commentsImg.src"
              :key="index"
              :style="(index + 1 - 2) % 3 == 0 ? 'margin: 12rpx 30rpx' : ''"
            >
              <image :src="item" alt="" class="add"></image>
              <image
                src="@/static/img/courseBuy/del.png"
                alt=""
                class="del"
                @tap="delImg(index)"
              ></image>
            </view>
          </view>
        </view>
      </u-popup>
    </view>

    <!-- 回复评论 -->
    <view class="apply-modal">
      <u-popup v-model="applyShow" mode="bottom" @close="applyClose">
        <view class="" v-for="(item, index) in applyData" :key="index">
          <text class="apply-num"
            >{{ applyData.length ? applyData.length : "0" }}条回复</text
          >
          <view class="published">
            <view class="userInformation">
              <!-- <img :src="item.member.face ? item.member.face : ''" alt="" /> -->
              <image
                :src="item.member.face ? item.member.face : ''"
                alt=""
              ></image>
              <view class="information">
                <text class="name">{{ item.member.nickName }}</text>
                <text class="date">{{ item.createTime }}</text>
              </view>
            </view>
            <view class="praise">
              <image src="@/static/img/courseBuy/praise2.png" alt=""></image>
              <text>{{ item.likes ? item.likes : "0" }}</text>
            </view>
          </view>
          <text class="text">{{ item.details }}</text>
        </view>
        <!-- 回复评论 -->
        <view class="apply">
          <scroll-view scroll-y="true" style="height: 800rpx">
            <view
              class="apply-row"
              v-for="(item, index) in getCommentList"
              :key="index"
            >
              <view class="published">
                <view class="userInformation">
                  <image :src="item.createByFace" alt=""></image>
                  <view class="information">
                    <text class="name">{{ item.createByName }}</text>
                    <text class="date">{{ item.createTime }}</text>
                  </view>
                </view>
                <!-- <view class="praise">
                <img src="@/static/img/courseBuy/praise2.png" alt="" />
                <text>{{ item.details }}</text>
              </view> -->
              </view>
              <text class="text"
                >回复
                <text class="username">{{ item.beReplied }}</text>
                {{ item.details }}</text
              >
            </view>
            <text class="search-all" @tap="getallcomment">查看更多回复</text>
          </scroll-view>
        </view>
      </u-popup>
    </view>
    <!-- 提示框 -->
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import { API } from "@/config/myApi.js";
export default {
  name: "newsComment",
  props: {
    commentList: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      // commentList: [{}, {}],
      //mock数据
      isAdd: false,
      isShowCommentsModal: false,
      textval: "",
      //评论分数，添加图片评论
      commentsImg: {
        selected: "../../static/img/courseBuy/collect2.png",
        slecet: "../../static/img/courseBuy/collect3.png",
        current: 4,
        src: [],
      },
      commentId: "",
      informationId: "",
      //评论输入框内容
      commentsVal: "",
      //回复评论弹窗显示
      applyShow: false,
      //回复评论数据
      getCommentList: [],
      applyData: {
        // children: Array(1)
        // commentType: 1,
        // createBy: 1376364798236688400,
        // createTime: "2022-10-10 15:55:36",
        // deleteTime: null,
        // details: "你也学我？",
        // id: "1579380109079126018",
        // informationId: 1579036247949213700,
        // likes: 0,
        // // member: Object,
        // pid: 1579376349321826300,
        // replyNum: 0,
        // status: 0,
        // headerImg: '../../static/img/sportPurpose/three.png',
        // username: 'C**执着',
        // date: '2020-10-19',
        // num: 4,
        // praise: 24,
        // commentsText: '持续的绿色投资驱动下，过去十年，中国在可再生能源、电动车等领域的技术创新脚步不断迈向新高度。',
        // apply: [{
        // 	headerImg: '../../static/img/sportPurpose/three.png',
        // 	username: '跺脚的小蓝',
        // 	date: '2020-10-19',
        // 	praise: 24,
        // 	commentsText: '持续的绿色投资驱动下，过去十年，中国在可再生能源、电动车等领域的技术创新脚步不断迈向新高度。',
        // }, {
        // 	headerImg: '../../static/img/sportPurpose/three.png',
        // 	username: '跺脚的小蓝',
        // 	date: '2020-10-19',
        // 	praise: 24,
        // 	commentsText: '持续的绿色投资驱动下，过去十年，中国在可再生能源、电动车等领域的技术创新脚步不断迈向新高度。',
        // }]
      },
      page: 1,
      rows: 10,
      page2: 1,
        rows2: 10,
    };
  },
  onLoad() {
    // this.getComment();
    this.informationId = uni.getStorageSync("newsDetail");
  },
  methods: {
    // 跳转到全部回复
    // toAllReply() {
    // 	uni.navigateTo({
    // 		url: '/pages/template/comment/reply'
    // 	});
    // },
    // 点赞
    async getLike(id) {
      let res = await API.informationCommentLike(id);
      if (res.code === 200) {
        this.commentList.forEach((v) => {
          if (v.id === id) {
            v.likes++;
            // console.log(v);
          }
        });
      } else {
        this.$refs.uToast.show({
          title: res.message,
        });
      }
      // this.commentList[index].isLike = !this.commentList[index].isLike;
      // if (this.commentList[index].isLike == true) {
      // 	this.commentList[index].likeNum++;
      // } else {
      // 	this.commentList[index].likeNum--;
      // }
    },
    // 评论列表
    // getComment() {
    //   this.commentList = [
    //     {
    //       id: 1,
    //       name: "叶轻眉",
    //       date: "12-25 18:58",
    //       contentText:
    //         "我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的",
    //       url: "https://cdn.uviewui.com/uview/template/SmilingDog.jpg",
    //       allReply: 12,
    //       likeNum: 33,
    //       isLike: false,
    //       replyList: [
    //         {
    //           name: "uview",
    //           contentStr:
    //             "uview是基于uniapp的一个UI框架，代码优美简洁，宇宙超级无敌彩虹旋转好用，用它！",
    //         },
    //         {
    //           name: "粘粘",
    //           contentStr:
    //             "今天吃什么，明天吃什么，晚上吃什么，我只是一只小猫咪为什么要烦恼这么多",
    //         },
    //       ],
    //     },
    //   ];
    // },
    //评论分数的显示
    choose(num) {
      if (num) {
        this.commentsImg.current = num;
      }
      if (this.commentsImg.current == 1) {
        return "一";
      } else if (this.commentsImg.current == 2) {
        return "二";
      } else if (this.commentsImg.current == 3) {
        return "三";
      } else if (this.commentsImg.current == 4) {
        return "四";
      } else if (this.commentsImg.current == 5) {
        return "五";
      }
    },
    //删除评论图片
    delImg(index) {
      this.commentsImg.src.splice(index, 1);
    },
    //评论回复
    commentsApply(e) {
      this.applyShow = true;
      this.commentId = e.id;
      this.informationId = e.informationId;
      if (e.children && e.children.length > 0) {
        data = e.children;
        console.log("回复", this.applyData);
      }
      this.getComment2();
    },
    getallcomment(){
      this.rows2+=10
      this.getComment2()
    },
    // 获取当前二级评论
    getComment2() {
      let data = {
        informationId: this.informationId,
        commentId: this.commentId,
        page: this.page2,
        rows: this.rows2,
      };
      API.getCommentBackListApi(data).then((res) => {
        this.getCommentList = res.result.rows;
      });
    },
    //关闭评论回复
    applyClose() {
      this.applyShow = false;
    },

    submitComment() {
      console.log("提交");
      let data = {
        informationId: this.informationId,
        pid: this.commentId,
        details: this.textval,
        commentType: 1,
        // page: 1,
        // rows: 10,
      };
      console.log(data);
      API.informationComment2(data).then((res) => {
        // console.log(res);
        if (res.success) {
          this.textval = "";
          this.applyShow = false;
          this.getInformationComment();
        }
      });
    },
    addRandomData() {
      this.rows+=10
      this.getInformationComment()
    },
    getInformationComment() {
      let data = {
        informationId: uni.getStorageSync("newsDetail").id,
        page: this.page,
        rows: this.rows,
      };
      API.informationComment(data).then((res) => {
        if (res.code === 200) {
          this.commentList = res.result.rows;
          console.log("res", res.result);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./comment.scss";

// 评论区标题
.information-title {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;

  > image {
    width: 5rpx;
    height: 28rpx;
  }

  > text {
    font-size: 30rpx;
    font-weight: bold;
    color: #333333;
    margin-left: 10rpx;
  }
}
.comments-msg {
  image {
    width: 20rpx;
    height: 20rpx;
  }
}
.userInformation {
  > image {
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
  }
}
.content{
  margin-bottom: 220rpx;
}
//查看更多-单独样式
.view-more {
  height: 150rpx;
  background: $page-bg-base;
  padding-top: 44rpx;
  text-align: center;
}
</style>
